<template>
  <div class="goodslist">
    <van-list
      class="goods"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        class="good-list-item"
        v-for="(item, index) in goods"
        :key="index"
      >
        <img
          v-lazy="item.img_url"
          @click="goDetail('/home/goodsinfo', item.id)"
        />
        <h2 class="tit">{{ item.title }}</h2>
        <div class="msg">
          <div class="">主动降噪</div>
          <div>热卖中</div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
// import mixins from '@/mixins';
export default {
  // mixins: [mixins],
  data() {
    return {
      page: 0,
      limit: 10,
      loading: false,
      finished: false,
      goods: [],
      count: 0,
    };
  },
  methods: {
    async getGoods() {
      ++this.page;
      const res = await this.$http.getGoods({ page: this.page, limit: this.limit });
      // this.goods = this.goods.concat(res.data.message);
      this.goods = [...this.goods, ...res.data.message];
      //临界点
      this.count = res.data.count;
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(async () => {
        await this.getGoods();
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.goods.length >= this.count) {
          this.finished = true;
        }
      }, 1000);
    },
  },
};
</script>
<style lang="scss">
.goodslist {
  .goods {
    display: flex;
    padding: 10px 10px 0 10px;
    justify-content: space-between;
    flex-wrap: wrap;
    .good-list-item {
      border: 1px solid #eee;
      width: 49%;
      padding: 8px;
      box-sizing: border-box;
      margin-bottom: 10px;
      text-align: center;
      border-radius: 6px;
      img {
        width: 164px;
        height: 164px;
      }
      .tit {
        font-size: 14px;
        font-weight: 600;
      }
      .msg {
        font-size: 12px;
      }
    }
    .van-list__error-text,
    .van-list__finished-text,
    .van-list__loading {
      width: 100%;
      text-align: center;
    }
  }
}
</style>
